<template>
  <div v-loading="loading" :class="className" :style="{height: height + 'px', width: width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'dealPhase'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: Number,
      default: 330
    },
    title: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null,
      loading: false
    }
  },
  watch: {
    chartData(data) {
      if (data) {
          this.$nextTick(() => {
            this.initChart(data)
          })
        }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart(this.chartData)
  },
  methods: {
    initChart(data) {
      this.chart = echarts.init(this.$el, null)

      this.chart.setOption({
        title: {
          text: this.title,
          left: 'left',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 15,
            fontWeight: 'bolder',
            color: '#333'
          },
          padding: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#dddc6b'
            }
          }
        },
        legend: {
          top: 'bottom',
          data: [this.$t('本金'), this.$t('账面价值')],
          icon: 'circle',
          textStyle: {
            fontSize: 13,
            color: '#333'
          },
          align: 'left',
          itemHeight: 8,
          itemWidth: 8,
          itemGap: 20
        },
        grid: {
          left: '5%',
          top: '25%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: ['5%', '5%'],
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: '#333',
                fontSize: 13
              }
            },
            axisLine: {
              lineStyle: {
                color: '#f5f5f5'
              }
            },
            data: [this.$t('一季度'), this.$t('二季度'), this.$t('三季度'), this.$t('四季度')]
          }
        ],

        yAxis: [
          {
            name: '',
            type: 'value',
            axisTick: { show: false },
            min: 0,
            splitNumber: 3,
            splitLine: {
              lineStyle: {
                color: '#f5f5f5'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#333',
                fontSize: 13
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitArea: {
              areaStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: this.$t('本金'),
            type: 'bar',
            barWidth: '10px',
            color: '#7AC3FF',
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0]
            },
            data: data.data1
          },
          {
            name: this.$t('账面价值'),
            type: 'bar',
            barWidth: '10px',
            color: '#117EFF',
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0]
            },
            data: data.data2
          }
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 3000
      })
    }
  }
}
</script>
